<template>
  <div class="appointment-view">
    <main class="appointment-container">
      <!-- 新增：搜索科室/医生 -->
      <div class="appointment-header animate">
        <h1 class="appointment-title">预约挂号</h1>
        <p class="appointment-subtitle">
          选择科室、日期和医生，轻松完成就医预约，节省候诊时间
        </p>
        <div class="header-flex-row">
          <div class="search-bar animate">
            <i class="fas fa-search search-icon"></i>
            <el-input v-model="searchQuery" placeholder="请输入科室或医生名称进行预约..." clearable @keyup.enter="handleSearch" />
            <el-button type="primary" @click="handleSearch">立即预约</el-button>
          </div>
        </div>
      </div>

      <el-steps :active="activeStep + 1" finish-status="success" align-center>
        <el-step v-for="(step, idx) in steps" :key="idx" :title="step.label">
          <template #icon>
            <i :class="['fas', step.icon]"></i>
          </template>
        </el-step>
      </el-steps>

      <!-- 选择科室 -->
      <div v-if="activeStep === 0">
        <el-card>
          <template #header>
            <h2 class="card-title">
              <i class="fas fa-clinic-medical"></i> 选择科室
            </h2>
          </template>
          <div class="card-body">
            <div class="selector-container">
              <div class="selector-label">请选择科室大类</div>
              <div class="department-category-grid">
                <div v-for="(cat, idx) in departmentCategories" :key="idx"
                  :class="['department-category-card', { selected: selectedCategoryIndex === idx }]"
                  @click="selectCategory(idx)">
                  <i :class="cat.icon"></i>
                  <div class="department-name">{{ cat.name }}</div>
                </div>
              </div>
              <div v-if="selectedCategoryIndex !== null" style="margin-top:24px;">
                <div class="selector-label">请选择具体科室</div>
                <div class="department-grid">
                  <div v-for="(dept, index) in departmentCategories[selectedCategoryIndex].subDepartments" :key="index"
                    :class="['department-card', { selected: selectedDepartment && selectedDepartment.name === dept.name }]"
                    @click="handleDepartmentClick(selectedCategoryIndex, index)"
                    style="cursor:pointer">
                    <i :class="dept.icon"></i>
                    <div class="department-name">{{ dept.name }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
        <div class="step-btns">
          <el-button @click="nextStep" :disabled="!selectedDepartment" type="primary">下一步</el-button>
        </div>
      </div>

      <!-- 选择日期和医生 -->
      <div v-if="activeStep === 1">
        <el-card>
          <template #header>
            <h2 class="card-title">
              <i class="fas fa-calendar-days"></i> 选择日期和医生
            </h2>
            <div v-if="selectedCategoryIndex !== null && selectedDepartment" class="selected-department-info">
              <span class="selected-dept-label">当前科室：</span>
              <span class="selected-dept-main">{{ departmentCategories[selectedCategoryIndex].name }}</span>
              <span class="selected-dept-divider">/</span>
              <span class="selected-dept-sub">{{ selectedDepartment.name }}</span>
            </div>
          </template>
          <div class="card-body">
            <div class="selector-container">
              <div class="selector-label">
                请选择就诊日期（可预约7天内号源）
              </div>
              <div class="calendar-grid">
                <div class="calendar-day" v-for="(day, index) in calendarDays" :key="index"
                  :class="{ weekend: day.weekend, disabled: day.disabled, selected: selectedDateIndex === index }"
                  @click="selectDate(index)" :disabled="day.disabled">
                  <div>{{ day.display }}</div>
                  <div class="date-indicator">{{ day.date }}</div>
                  <div class="doctor-count">
                    <span v-if="getDoctorCountByDate(day.dateStr) > 0" class="doctor-count-link">{{ getDoctorCountByDate(day.dateStr) }}位医生可挂号</span>
                    <span v-else style="color:#f56c6c;">无号源</span>
                  </div>
                </div>
              </div>
              <div class="selector-label" v-if="selectedDepartment && selectedDate" style="margin-top:24px;">
                请选择医生及就诊时间
              </div>
              <div class="doctor-list">
                <div v-for="(doctor, index) in filteredDoctors" :key="index" :class="['doctor-card', { selected: doctor.selected }]"
                  @click="selectDoctor(index)" style="cursor:pointer">
                  <div class="doctor-image">
                    <i class="fas fa-user-md"></i>
                  </div>
                  <div class="doctor-info">
                    <h3 class="doctor-name">{{ doctor.name }}</h3>
                    <div class="doctor-title">{{ doctor.title }}</div>
                    <span class="doctor-specialty">{{ doctor.specialty }}</span>
                    <div class="doctor-price" style="color:var(--primary-blue);font-weight:600;margin-bottom:8px;">
                      挂号费：¥{{ doctor.price }}
                    </div>
                    <div class="schedule-indicator" :class="doctor.availability">
                      <i :class="doctor.availabilityIcon"></i> {{ doctor.availabilityText }}
                    </div>
                    <div class="schedule-times" v-if="doctor.selected">
                      <div class="time-slot" v-for="(slot, slotIndex) in getDoctorSlots(doctor)" :key="slotIndex"
                        :class="[{ booked: slot.booked }, { selected: selectedTimeSlot === slot } ]" @click.stop="selectTimeSlot(slot)"
                        :disabled="slot.booked">
                        {{ slot.time }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div v-if="selectedDate && filteredDoctors.length === 0" class="no-doctor-tip" style="color:#f56c6c;margin-top:16px;">
                当前日期该科室暂无医生排班，请选择其他日期或科室。
              </div>
            </div>
          </div>
        </el-card>
        <div class="step-btns">
          <el-button @click="prevStep">上一步</el-button>
          <el-button @click="nextStep" :disabled="!selectedDate || !selectedDoctor || !selectedTimeSlot" type="primary">下一步</el-button>
        </div>
        <div v-if="selectedDoctor && !selectedTimeSlot" style="color:#f56c6c;margin-top:8px;">
          请选择具体的就诊时段
        </div>
      </div>

      <!-- 确认预约 -->
      <div v-if="activeStep === 2">
        <el-card class="booking-summary animate">
          <h3 class="summary-header">预约信息</h3>
          <div class="summary-item">
            <div class="summary-label">就诊日期：</div>
            <div class="summary-value">{{ selectedDate?.date ? selectedDate.date : '未选择' }}</div>
          </div>
          <div class="summary-item">
            <div class="summary-label">就诊科室：</div>
            <div class="summary-value">{{ selectedDepartment?.name ? selectedDepartment.name : '未选择' }}</div>
          </div>
          <div class="summary-item">
            <div class="summary-label">就诊医生：</div>
            <div class="summary-value">
              {{ selectedDoctor?.name ? selectedDoctor.name + ' ' + selectedDoctor.title : '未选择' }}
            </div>
          </div>
          <div class="summary-item">
            <div class="summary-label">就诊时段：</div>
            <div class="summary-value" :class="{ unselected: !selectedTimeSlot }">
              {{ selectedTimeSlot ? selectedTimeSlot.time : '请选择具体时段' }}
            </div>
          </div>
          <div class="summary-item">
            <div class="summary-label">就诊费用：</div>
            <div class="summary-value">¥50（医保可报销）</div>
          </div>
          <div class="summary-item">
            <div class="summary-label">当前状态：</div>
            <div class="summary-value">
              {{ selectedTimeSlot ? '待确认' : '待选择时段' }}
            </div>
          </div>
          <div class="step-btns">
            <el-button @click="prevStep">上一步</el-button>
            <el-button type="primary" @click="confirmBooking" :disabled="!selectedTimeSlot">
              <i class="fas fa-calendar-check"></i> 确认预约
            </el-button>
          </div>
        </el-card>
      </div>
    </main>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue';
import { ElSteps, ElStep, ElCard, ElButton, ElMessage } from 'element-plus';
import { useAppStore } from '../stores/appStore'
import { getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import { getDepartments, getDoctors } from '@/api/appointment'
const appStore = useAppStore()
const instance = getCurrentInstance()
const router = useRouter()
const selectedDateIndex = ref(null);
// 步骤激活状态
const activeStep = ref(0);
// 步骤数据
const steps = [
  { label: '选择科室', icon: 'fa-hospital-user' },
  { label: '选择日期和医生', icon: 'fa-calendar-days' },
  { label: '确认预约', icon: 'fa-clipboard-check' },
];

const departmentCategories = ref([])
const doctors = ref([])
onMounted(async () => {
  departmentCategories.value = await getDepartments()
  doctors.value = await getDoctors()
})

const selectedCategoryIndex = ref(null);

// 选中状态
const selectedDepartment = ref(null);

// 医生数据（重构，添加更多医生，科室与二级科室精确对应，增加价格）
const doctorsData = ref([
  // 内科系统
  {
    name: '李明',
    title: '主任医师',
    specialty: '心血管内科',
    department: '心血管内科',
    price: 80,
    availability: 'available',
    availabilityIcon: 'fas fa-check-circle',
    availabilityText: '号源充足',
    schedules: [
      { date: '2025-06-18', slots: [ { time: '08:30-09:00', booked: false }, { time: '09:00-09:30', booked: false } ] },
      { date: '2025-06-19', slots: [ { time: '10:00-10:30', booked: false } ] }
    ],
    selected: false,
  },
  {
    name: '王芳',
    title: '副主任医师',
    specialty: '呼吸与危重症医学科',
    department: '呼吸与危重症医学科',
    price: 50,
    availability: 'available',
    availabilityIcon: 'fas fa-check-circle',
    availabilityText: '号源充足',
    schedules: [
      { date: '2025-06-20', slots: [ { time: '08:30-09:00', booked: false }, { time: '09:00-09:30', booked: true } ] },
      { date: '2025-06-21', slots: [ { time: '10:00-10:30', booked: false } ] }
    ],
    selected: false,
  },
  // 外科系统
  {
    name: '张伟',
    title: '主治医师',
    specialty: '骨科',
    department: '骨科（四川省重点专科）',
    price: 30,
    availability: 'available',
    availabilityIcon: 'fas fa-check-circle',
    availabilityText: '号源充足',
    schedules: [
      { date: '2025-06-21', slots: [ { time: '08:30-09:00', booked: false }, { time: '09:00-09:30', booked: false } ] },
      { date: '2025-06-23', slots: [ { time: '08:30-09:00', booked: false }, { time: '09:00-09:30', booked: false } ] }
    ],
    selected: false,
  },
  {
    name: '李娜',
    title: '副主任医师',
    specialty: '普通外科',
    department: '普通外科（胃肠/肝胆）',
    price: 50,
    availability: 'available',
    availabilityIcon: 'fas fa-check-circle',
    availabilityText: '号源充足',
    schedules: [
      { date: '2025-06-23', slots: [ { time: '08:30-09:00', booked: false } ] }
    ],
    selected: false,
  },
  // 专科门诊
  {
    name: '赵强',
    title: '主任医师',
    specialty: '妇科',
    department: '妇科',
    price: 80,
    availability: 'available',
    availabilityIcon: 'fas fa-check-circle',
    availabilityText: '号源充足',
    schedules: [
      { date: '2025-06-22', slots: [ { time: '08:30-09:00', booked: false } ] }
    ],
    selected: false,
  },
  {
    name: '钱丽',
    title: '主治医师',
    specialty: '儿童内科',
    department: '儿童内科',
    price: 30,
    availability: 'available',
    availabilityIcon: 'fas fa-check-circle',
    availabilityText: '号源充足',
    schedules: [
      { date: '2025-06-22', slots: [ { time: '08:30-09:00', booked: false } ] }
    ],
    selected: false,
  },
  // 特色诊疗中心
  {
    name: '孙健',
    title: '副主任医师',
    specialty: '康复医学科',
    department: '康复医学科（含高压氧）',
    price: 50,
    availability: 'available',
    availabilityIcon: 'fas fa-check-circle',
    availabilityText: '号源充足',
    schedules: [
      { date: '2025-06-18', slots: [ { time: '08:30-09:00', booked: false } ] }
    ],
    selected: false,
  },
  // 医技科室
  {
    name: '周敏',
    title: '主治医师',
    specialty: '放射科',
    department: '放射科（含CT/MRI）',
    price: 30,
    availability: 'available',
    availabilityIcon: 'fas fa-check-circle',
    availabilityText: '号源充足',
    schedules: [
      { date: '2025-06-19', slots: [ { time: '08:30-09:00', booked: false } ] }
    ],
    selected: false,
  },
  // 更多医生可继续补充...
]);

// 选中日期
const selectedDate = ref(null);
// 选中医生
const selectedDoctor = ref(null);
// 选中时段
const selectedTimeSlot = ref(null);

// 获取未来7天日期
function getNext7Days() {
  const days = [];
  const weekMap = ['周日','周一','周二','周三','周四','周五','周六'];
  const today = new Date();
  for (let i = 0; i < 7; i++) {
    const d = new Date(today);
    d.setDate(today.getDate() + i);
    days.push({
      display: i === 0 ? '今天' : i === 1 ? '明天' : weekMap[d.getDay()],
      date: `${d.getMonth() + 1}月${d.getDate()}日`,
      weekend: d.getDay() === 0 || d.getDay() === 6,
      disabled: false,
      selected: false,
      fullDate: `${d.getFullYear()}年${d.getMonth() + 1}月${d.getDate()}日 ${weekMap[d.getDay()]}`,
      dateStr: `${d.getFullYear()}-${(d.getMonth() + 1).toString().padStart(2, '0')}-${d.getDate().toString().padStart(2, '0')}`
    });
  }
  return days;
}

// 响应式calendarDays，默认未来7天，搜索医生时只显示该医生有排班的日期
const calendarDays = computed(() => {
  if (searchDoctor.value) {
    // 搜索医生时，只显示该医生未来7天有排班的日期
    const doc = doctorsData.value.find(doc => doc.name === searchDoctor.value.name);
    if (!doc) return [];
    const docDates = doc.schedules.map(sch => sch.date);
    return getNext7Days().filter(day => docDates.includes(day.dateStr));
  }
  return getNext7Days();
});

// 搜索医生联动变量
const searchDoctor = ref(null);

// 选择日期
const selectDate = (index) => {
  if (!selectedDepartment.value) {
    ElMessage.warning('请先选择科室');
    return;
  }
  selectedDateIndex.value = index;
  selectedDate.value = calendarDays.value[index];
  // 重置所有医生的选中状态
  doctorsData.value.forEach(doc => doc.selected = false);
  selectedDoctor.value = null;
  selectedTimeSlot.value = null;
};

// 过滤当前科室、当前日期下有排班的医生（或搜索医生）
const filteredDoctors = computed(() => {
  if (!selectedDate.value) return [];
  const dateStr = selectedDate.value.dateStr;
  if (searchDoctor.value) {
    // 搜索医生时只显示该医生
    const doc = doctorsData.value.find(doc => doc.name === searchDoctor.value.name);
    if (!doc) return [];
    if (doc.schedules.some(sch => sch.date === dateStr)) return [doc];
    return [];
  }
  if (!selectedDepartment.value) return [];
  return doctorsData.value.filter(doctor =>
    doctor.department === selectedDepartment.value.department &&
    doctor.schedules.some(sch => sch.date === dateStr)
  );
});

// 获取医生在当前日期的排班时段
const getDoctorSlots = (doctor) => {
  if (!selectedDate.value) return [];
  const dateStr = selectedDate.value.dateStr;
  const sch = doctor.schedules.find(sch => sch.date === dateStr);
  return sch ? sch.slots : [];
};

// 选择科室
const selectCategory = (idx) => {
  selectedCategoryIndex.value = idx;
  selectedDepartment.value = null;
  // 自动滚动到小类区
  setTimeout(() => {
    const el = document.querySelector('.department-grid');
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' });
  }, 100);
};

const handleDepartmentClick = (catIdx, deptIdx) => {
  selectedCategoryIndex.value = catIdx;
  selectedDepartment.value = departmentCategories.value[catIdx].subDepartments[deptIdx];
  nextStep();
};

// 选择医生
const selectDoctor = (index) => {
  filteredDoctors.value.forEach(doc => doc.selected = false);
  filteredDoctors.value[index].selected = true;
  selectedDoctor.value = filteredDoctors.value[index];
  // 自动选中第一个可用时段
  const slots = getDoctorSlots(selectedDoctor.value);
  const firstAvailable = slots.find(slot => !slot.booked);
  selectedTimeSlot.value = firstAvailable || null;
};

// 选择时段
const selectTimeSlot = (slot) => {
  if (!slot.booked) {
    selectedTimeSlot.value = slot;
  }
};

// 下一步
const nextStep = () => {
  if (activeStep.value < 2) {
    activeStep.value++;
  }
};

// 上一步
const prevStep = () => {
  if (activeStep.value > 0) {
    activeStep.value--;
  }
};

// 确认预约
const confirmBooking = () => {
  if (!appStore.user.isLoggedIn) {
    // 触发Header登录弹窗显示
    instance?.proxy?.$emit && instance.proxy.$emit('show-login-modal')
    // 或使用window事件
    window.dispatchEvent(new CustomEvent('show-login-modal'))
    ElMessage.warning('请先登录后再预约')
    return
  }
  if (selectedTimeSlot.value) {
    // 生成订单号
    const orderNo = 'AXYY' + Date.now()
    // 跳转到支付页面，传递订单信息
    router.push({
      path: '/pay-order',
      query: {
        orderNo,
        userName: appStore.user.name || '张三',
        date: selectedDate.value?.date || '',
        time: selectedTimeSlot.value?.time || '',
        department: selectedDepartment.value?.name || '',
        doctor: selectedDoctor.value?.name || '',
        price: selectedDoctor.value?.price || 50
      }
    })
    // 实际应发送预约请求并锁定号源
  } else {
    alert('请选择具体时段');
  }
};

const searchQuery = ref('');

// 搜索处理
const handleSearch = () => {
  const query = searchQuery.value.trim();
  if (!query) {
    ElMessage.warning('请输入科室或医生名称');
    return;
  }
  // 先查小科室
  let found = false;
  departmentCategories.value.forEach((cat, catIdx) => {
    cat.subDepartments.forEach((dept, deptIdx) => {
      if (dept.name.includes(query)) {
        selectCategory(catIdx);
        selectedDepartment.value = dept;
        activeStep.value = 1;
        found = true;
      }
    });
  });
  if (found) {
    searchDoctor.value = null;
    return;
  }
  // 再查医生
  const doc = doctorsData.value.find(doc => doc.name.includes(query));
  if (doc) {
    // 选中医生所属科室
    let foundDept = false;
    departmentCategories.value.forEach((cat, catIdx) => {
      cat.subDepartments.forEach((dept, deptIdx) => {
        if (dept.department === doc.department) {
          selectCategory(catIdx);
          selectedDepartment.value = dept;
          foundDept = true;
        }
      });
    });
    if (foundDept) {
      searchDoctor.value = doc;
      activeStep.value = 1;
      selectedDoctor.value = null;
      selectedTimeSlot.value = null;
    }
    return;
  }
  ElMessage.warning('未找到相关科室或医生');
};

// 判断科室下是否有医生
const hasDoctors = (dept) => {
  return doctorsData.value.some(doc => doc.department === dept.department);
};

// 统计某天有排班医生数量
const getDoctorCountByDate = (dateStr: string) => {
  if (!selectedDepartment.value) return 0;
  return doctorsData.value.filter(doc =>
    doc.department === selectedDepartment.value.department &&
    doc.schedules.some(sch => sch.date === dateStr)
  ).length;
};

// 获取某天有排班医生姓名
const getDoctorNamesByDate = (dateStr: string) => {
  if (!selectedDepartment.value) return [];
  return doctorsData.value.filter(doc =>
    doc.department === selectedDepartment.value.department &&
    doc.schedules.some(sch => sch.date === dateStr)
  ).map(doc => doc.name);
};
</script>

<style scoped lang="scss">
/* 预约页面主体 */
.appointment-container {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
}

.appointment-header {
  margin-bottom: 40px;
  text-align: center;
}
.appointment-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 2.5rem;
  color: var(--primary-blue);
  margin-bottom: 15px;
  position: relative;
  display: inline-block;
}

.appointment-title::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: var(--accent-teal);
  border-radius: 4px;
}

.appointment-subtitle {
  font-size: 1.1rem;
  color: var(--text-medium);
  max-width: 700px;
  margin: 30px auto 0;
}

/* 选择器区域 */
.selector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.selector-container {
  position: relative;
}

.selector-label {
  display: block;
  margin-bottom: 12px;
  font-weight: 600;
  color: var(--text-dark);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}

.calendar-day {
  padding: 12px 5px;
  text-align: center;
  border-radius: 12px;
  cursor: pointer;
  transition: var(--transition);
  .doctor-count {
    margin-top: 4px;
    font-size: 13px;
    color: #1976d2;
    .doctor-count-link {
      cursor: pointer;
      text-decoration: underline dotted;
      color: #1976d2;
    }
  }
}

.calendar-day.weekend {
  color: var(--warning);
}

.calendar-day.disabled {
  color: var(--text-light);
  background: rgba(0, 0, 0, 0.03);
  cursor: not-allowed;
}

.calendar-day.selected {
  background: var(--primary-blue);
  color: var(--white);
}

.calendar-day:hover:not(.disabled) {
  background: var(--light-blue);
}

.calendar-day.selected .date-indicator {
  color: var(--white) !important;
}

.date-indicator {
  font-size: 0.8rem;
  margin-top: 5px;
  color: var(--text-light);
}

/* 科室选择 */
.department-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 15px;
}

.department-card {
  padding: 18px;
  border-radius: 12px;
  border: 2px solid var(--medium-gray);
  background: var(--white);
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
  margin-bottom: 10px;
}

.department-card i {
  font-size: 32px;
  margin-bottom: 15px;
  color: var(--primary-blue);
}

.department-card:hover {
  transform: translateY(-5px);
  border-color: var(--primary-blue);
  box-shadow: var(--shadow);
}

.department-card.selected {
  background: var(--primary-blue);
  color: var(--white);
  border-color: var(--primary-blue);
  box-shadow: var(--shadow);
}

.department-card.selected i,
.department-card.selected .department-name {
  color: var(--white);
}

.department-card.disabled {
  pointer-events: none;
  background: #f5f5f5;
  color: var(--text-light);
  border-color: var(--medium-gray);
  opacity: 0.6;
}

.department-name {
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 5px;
  color: var(--text-dark);
}

/* 医生列表 */
.doctor-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.doctor-card {
  border: 2px solid var(--medium-gray);
  border-radius: 16px;
  overflow: hidden;
  background: var(--white);
  transition: var(--transition);
  cursor: pointer;
  margin-bottom: 10px;
}

.doctor-card.selected {
  border-color: var(--primary-blue);
  box-shadow: var(--shadow);
  transform: translateY(-5px);
}

.doctor-image {
  height: 160px;
  background: var(--light-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
  color: var(--primary-blue);
}

.doctor-info {
  padding: 20px;
}

.doctor-name {
  font-family: 'Poppins', sans-serif;
  font-size: 1.3rem;
  margin-bottom: 5px;
  color: var(--text-dark);
}

.doctor-title {
  color: var(--primary-blue);
  font-weight: 500;
  margin-bottom: 10px;
}

.doctor-specialty {
  background: var(--light-blue);
  color: var(--primary-blue);
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  display: inline-block;
  margin-bottom: 15px;
}

.schedule-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-light);
  font-size: 0.9rem;
}

.schedule-indicator.available {
  color: var(--success);
}

.schedule-indicator.unavailable {
  color: var(--danger);
}

.schedule-times {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 15px;
  display: none;
}

.doctor-card.selected .schedule-times {
  display: grid;
  animation: fadeIn 0.5s ease-out;
}

.time-slot {
  padding: 10px;
  text-align: center;
  background: var(--light-blue);
  border-radius: 8px;
  color: var(--primary-blue);
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

.time-slot:hover {
  background: var(--primary-blue);
  color: var(--white);
}

.time-slot.booked {
  background: var(--light-gray);
  color: var(--text-light);
  cursor: not-allowed;
}

.time-slot.selected {
  background: var(--primary-blue);
  color: var(--white);
  border: 2px solid var(--accent-teal);
}

/* 预约信息卡片 */
.booking-summary {
  background: rgba(13, 110, 253, 0.05);
  border-radius: 16px;
  padding: 25px;
  margin-top: 40px;
  border: 1px solid rgba(13, 110, 253, 0.2);
  position: sticky;
  top: 100px;
}

.summary-header {
  font-family: 'Poppins', sans-serif;
  font-size: 1.5rem;
  margin-bottom: 20px;
  color: var(--text-dark);
  text-align: center;
}

.summary-item {
  margin-bottom: 15px;
  display: flex;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
  padding-bottom: 10px;
}

.summary-label {
  flex: 1;
  font-weight: 500;
  color: var(--text-medium);
}

.summary-value {
  flex: 2;
  color: var(--text-dark);
  font-weight: 600;
  text-align: right;
}

.summary-value.unselected {
  color: var(--danger);
  font-weight: 500;
}

.step-btns {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin: 32px 0 0 0;
}
.step-btns .el-button {
  min-width: 120px;
  height: 44px;
  font-size: 1.08rem;
  border-radius: 24px;
  font-weight: 600;
  padding: 0 28px;
}
@media (max-width: 600px) {
  .step-btns .el-button {
    min-width: 90px;
    height: 38px;
    font-size: 0.98rem;
    border-radius: 18px;
    padding: 0 14px;
  }
}

/* 动画效果 */
@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate {
  animation: fadeIn 0.5s ease-out forwards;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .progress-steps {
    flex-direction: column;
    gap: 20px;
  }

  .step::after {
    display: none;
  }

  .doctor-list {
    grid-template-columns: 1fr;
  }
}

.el-steps {
  background: var(--white);
  border-radius: 16px;
  padding: 24px 0 18px 0;
  margin-bottom: 36px;
  box-shadow: 0 4px 18px rgba(13,110,253,0.07);
}
.el-step__icon.is-text {
  background: linear-gradient(135deg, #0d6efd, #0dcaf0);
  color: #fff;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 2px 8px rgba(13,110,253,0.12);
}
.el-step__title {
  font-weight: 600;
  color: var(--primary-blue);
  font-size: 1.1rem;
}
.el-step.is-success .el-step__icon.is-text {
  background: linear-gradient(135deg, #20c997, #0dcaf0);
}
.el-step__main {
  margin-top: 8px;
}

.search-bar {
  max-width: 600px;
  margin: 0 auto 32px auto;
  display: flex;
  background: var(--white);
  border-radius: 60px;
  box-shadow: 0 4px 18px rgba(13, 110, 253, 0.10);
  overflow: hidden;
  height: 64px;
  align-items: center;
  padding: 0 0 0 18px;
  gap: 0;
  position: relative;
  transition: box-shadow 0.2s;
}
.search-bar:focus-within {
  box-shadow: 0 8px 32px rgba(13, 110, 253, 0.18);
}
.search-bar .search-icon {
  font-size: 1.35rem;
  color: var(--primary-blue);
  margin-right: 10px;
  opacity: 0.85;
}
.search-bar .el-input {
  flex: 1;
  height: 100%;
}
:deep(.search-bar .el-input__wrapper) {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
:deep(.search-bar .el-input__inner) {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
.search-bar .el-button {
  border-radius: 0 60px 60px 0;
  font-weight: 600;
  padding: 0 38px;
  height: 64px;
  margin-right: 0;
  background: linear-gradient(90deg, var(--primary-blue), var(--accent-teal));
  color: #fff;
  border: none;
  font-size: 1.13rem;
  display: flex;
  align-items: center;
  transition: background 0.2s, box-shadow 0.2s;
  box-shadow: none;
}
.search-bar .el-button:hover {
  background: linear-gradient(90deg, var(--accent-teal), var(--primary-blue));
  color: #fff;
  box-shadow: 0 4px 18px rgba(13, 110, 253, 0.18);
}
@media (max-width: 600px) {
  .search-bar {
    height: 48px;
    border-radius: 32px;
    padding-left: 8px;
  }
  .search-bar .el-input__wrapper,
  .search-bar .el-input__inner {
    height: 48px;
    font-size: 1rem;
  }
  .search-bar .el-button {
    height: 48px;
    padding: 0 18px;
    font-size: 1rem;
    border-radius: 0 32px 32px 0;
  }
}

.department-category-grid {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  justify-content: center;
}
.department-category-card {
  min-width: 120px;
  min-height: 120px;
  background: var(--white);
  border-radius: 18px;
  box-shadow: 0 2px 10px rgba(13,110,253,0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: box-shadow 0.2s, background 0.2s, transform 0.2s;
  border: 2px solid transparent;
  font-size: 1.1rem;
  margin-bottom: 8px;
}
.department-category-card i {
  font-size: 2.5rem;
  margin-bottom: 12px;
  color: var(--primary-blue);
  transition: color 0.2s;
}
.department-category-card.selected,
.department-category-card:hover {
  background: linear-gradient(135deg, #e3f2fd, #e0f7fa 80%);
  box-shadow: 0 4px 18px rgba(13,110,253,0.13);
  border-color: var(--primary-blue);
  transform: translateY(-4px) scale(1.04);
}
.department-category-card.selected i,
.department-category-card:hover i {
  color: var(--accent-teal);
}
.department-category-card .department-name {
  font-weight: 700;
  color: var(--primary-blue);
}
// 小类卡片选中动画
.department-card.selected {
  animation: pulse 0.5s;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 var(--accent-teal); }
  70% { box-shadow: 0 0 0 10px rgba(32,201,151,0.15); }
  100% { box-shadow: 0 0 0 0 var(--accent-teal); }
}
// 移动端自适应
@media (max-width: 768px) {
  .department-category-grid {
    flex-wrap: wrap;
    gap: 10px;
  }
  .department-category-card {
    min-width: 45vw;
    min-height: 90px;
    font-size: 1rem;
  }
  .department-grid {
    grid-template-columns: 1fr;
  }
}

// 选择日期和医生页面顶部科室信息美化
.selected-department-info {
  margin-top: 8px;
  margin-bottom: 0;
  font-size: 1.08rem;
  font-weight: 500;
  color: var(--primary-blue);
  display: flex;
  align-items: center;
  gap: 8px;
}
.selected-dept-label {
  color: var(--text-medium);
  font-weight: 400;
}
.selected-dept-main {
  color: var(--primary-blue);
  font-weight: 700;
}
.selected-dept-divider {
  color: var(--text-light);
  margin: 0 2px;
}
.selected-dept-sub {
  color: var(--accent-teal);
  font-weight: 700;
}

.header-flex-row {
  display: flex;
  gap: 32px;
  justify-content: center;
  align-items: stretch;
  margin: 32px auto 0 auto;
  max-width: 1200px;
}
.header-flex-row .search-bar {
  flex: 1.2;
  min-width: 0;
}
.header-flex-row .smart-guide-recommend {
  flex: 1;
  min-width: 0;
}
@media (max-width: 992px) {
  .header-flex-row {
    flex-direction: column;
    gap: 18px;
    max-width: 100%;
    margin: 24px 0 0 0;
  }
}

.calendar-day.selected .doctor-count-link {
  color: var(--white);
}
</style>